<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 1200px;
            height: 400px;
            /*float: left;*/
            position: absolute;
        }

        div ul {
            width: 1200px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
    //获取元素
    var box =document.getElementById("box");
    var ul = box.children[0];
    var lis =ul.children;

    // 给li标签循环添加背景图片
    for(var i=0;i<lis.length;i++){
        lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
        lis[i].style.left=i*50+"px";//初始化位置
        //循环添加元素的索引值
        lis[i].index=i;

        //循环给li添加鼠标移入事件
        lis[i].onmouseover=function(){
            //判断是否大于当前索引，调用不同计算公式
            var moveLong;
            //移入一个li的同时调整其他li的位置
            //所以重新遍历一遍所有的项目
            for(var i=0;i<lis.length;i++){
                if(i<=this.index){
                    moveLong = i*50;
                }else{
                    moveLong = i*50+950;
                }
                //不同的li移动到对应位置
                animate(lis[i], {
                    "left":moveLong
                })

            }
        }

        //鼠标移除事件，重新遍历所有的li元素重新回到初始化位置
        lis[i].onmouseout=function(){
            for(var i=0;i<lis.length;i++){
                //每个元素都移动到初始化位置
                animate(lis[i], {
                    "left":i*50
                })
            }

        }

    }




    /**
     * 封装了一个可以修改一个元素的任意属性的运动函数，
     * @param tag         =====标签名，元素对象
     * @param cssDatas   ======传入一个css集合对象
     */
    function animate(tag, cssDatas) {
        clearInterval(tag.timer);//清除前面定时器
        tag.timer = setInterval(function () {
            var flag = true;
            for (key in cssDatas) {

                if(key=="opacity"){
                    //为了应对auto转换为NaN的问题，我们使用短路操作，保证程序的健壮性
                    var leader = getStyle(tag, key)*100 || 0;
                    //缓动公式的一部分是更改step的值
                    var step = (cssDatas[key]*100 - leader ) / 10;
                    //由于offsetLeft在取值的时候会四舍五入，我们的step如果比较小，会造成无法运动的问题
                    //根据步数的正负，更改取整方式
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //缓动公式
                    leader = leader + step;
                    tag.style[key] = leader/100;
                }else if(key=="zIndex"){
                    tag.style.Index = cssDatas[key];
                }else{
                    //为了应对auto转换为NaN的问题，我们使用短路操作，保证程序的健壮性
                    var leader = parseInt(getStyle(tag, key)) || 0;
                    //缓动公式的一部分是更改step的值
                    var step = (cssDatas[key] - leader ) / 10;
                    //由于offsetLeft在取值的时候会四舍五入，我们的step如果比较小，会造成无法运动的问题
                    //根据步数的正负，更改取整方式
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //缓动公式
                    leader = leader + step;
                    tag.style[key] = leader + "px";
                }

                //检测是否走到了指定位置
                if (cssDatas[key] != leader) {
                    flag = false;
                }

            }
            if (flag) {
                clearInterval(tag.timer);
            }
        }, 17);
    }

    //用于获取某个标签的某个样式属性值
    //带单位
    function getStyle(tag, attr) {
        //检测支持哪一个
        //box.currentStyle//如果不存在值为undefined
        //getComputedStyle如果浏览器不支持。相当于变量未声明，报错
        if (tag.currentStyle) {
            //ie支持
            return tag.currentStyle[attr];
        } else {
            //标准方法
            return getComputedStyle(tag, null)[attr];
        }
    }

</script>
</body>
</html>
